<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="560px"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") {{title}}
  .modal-content
    el-form(:model="form", :rules="rules" ref="ruleForm" label-width="100px")
      el-form-item(label="姓名：" prop="employeeName")
        el-input(placeholder="请输入姓名" v-model="form.employeeName")
      el-form-item(label="账号：" prop="userName")
        el-input(placeholder="请输入账号" v-model="form.userName")
      el-form-item(label="手机号：" prop="mobile")
        el-input(placeholder="请输入手机号" v-model="form.mobile")
      el-form-item(label="邮箱：" prop="email")
        el-input(placeholder="请输入邮箱" v-model="form.email")
      el-form-item(label="系统角色：" prop="roleId")
        el-select(placeholder="请选择系统角色" v-model="form.roleId")
          el-option(v-for="item in roleList", :key="item.roleId", :label="item.roleName", :value="item.roleId")
    .form-warning 提示：默认初始密码手机号码
  .modal-footer(slot="footer")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="confirm" v-if="$permission('AB-06001-004')") 确定
</template>

<script>
import { getRoleList, postAddUser, updateUserInfo } from 'api'
export default {
  name: 'addMemberDialog',
  props: {
    show: Boolean,
    item: Object
  },
  data () {
    return {
      roleList: [],
      form: {
        employeeName: '',
        userName: '',
        mobile: '',
        email: '',
        roleId: ''
      },
      title: '添加成员',
      rules: {
        employeeName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        roleId: [
          { required: true, message: '请选择系统角色', trigger: 'select' }
        ]
      }
    }
  },
  methods: {
    beforeOpen () {
      if (!this.item) {
        this.title = '添加成员'
        this.form = {
          employeeName: '',
          userName: '',
          mobile: '',
          email: '',
          roleId: ''
        }
      } else {
        this.title = '编辑成员'
        this.form = { ...this.form, ...this.item }
      }
      
      this.getRoleList()
    },
    handleClose () {
      this.$emit('close')
    },
    confirm () {
      this.$refs.ruleForm.validate(async (valid) => {
        try {
          if (valid) {
            if (!this.item) {
              await this.$axios.post(postAddUser, { ...this.form })
              this.$message.success('添加角色成功！')
            } else {
              await this.$axios.post(updateUserInfo, { ...this.form })
              this.$message.success('修改角色成功！')
            }
            this.$emit('confirm')
          }
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    async getRoleList () {
      try {
        const { ResultSet } = await this.$axios.post(getRoleList)
        this.roleList = ResultSet.userData.userRoleList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  }
} 
</script>

<style lang="scss" scoped>
.modal-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.modal-content {
  .el-select {
    width: 100%;
  }
}
.form-warning {
  text-align: right;
  font-size: 12px;
  line-height: 20px;
  color: #FF2E42;
}
</style>
